<div class="tlp-framed-vertically">

    {{> creation-settings-tabs }}

    <div class="tlp-framed-horizontally">
        <section class="tlp-pane">
            <div class="tlp-pane-container">
                <div class="tlp-pane-header">
                    <h1 class="tlp-pane-title"><i class="tlp-pane-title-icon fa fa-list"></i> {{ title }}</h1>
                </div>
                <section class="tlp-pane-section">
                    <div class="tlp-table-actions">
                        <button
                            type="button"
                            class="tlp-button-primary tlp-table-actions-element"
                            id="add-project-category-button"
                        >
                            <i class="fa fa-plus tlp-button-icon"></i> {{ add_trove_cat }}
                        </button>
                    </div>
                    {{> trovecat-modal-add }}
                    <table class="tlp-table">
                        <thead>
                        <tr>
                            <th>{{ header_name }}</th>
                            <th>{{ header_description }}</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        {{# trovecats }}
                            <tr>
                                <td>
                                    <div style="margin: 0 0 0 {{ spacing }}px">
                                        {{# has_spacing }} &#8627;  {{/ has_spacing }}
                                        {{ fullname }}
                                    </div>
                                </td>
                                <td>{{ description }}</td>
                                <td class="tlp-table-cell-actions">
                                    <button
                                        type="button"
                                        class="tlp-table-cell-actions-button tlp-button-small tlp-button-primary tlp-button-outline trovecats-edit-button"
                                        data-modal-id="trove-cat-edit-{{ trove_cat_id }}"
                                    >
                                        <i class="fa fa-pencil tlp-button-icon"></i> {{ edit_button }}
                                    </button>
                                    {{> trovecat-modal-edit }}
                                    <button
                                        type="button"
                                        class="tlp-table-cell-actions-button tlp-button-small tlp-button-danger trovecats-delete-button
                                        tlp-button-outline" data-modal-id="trove-cat-delete-{{ trove_cat_id }}">
                                        <i class="fa fa-trash tlp-button-icon"></i> {{ delete_button }}
                                    </button>
                                    {{> trovecat-modal-delete }}
                                </td>
                            </tr>
                        {{/ trovecats }}
                        </tbody>
                        <tfoot>
                    </table>
                </section>
            </div>
        </section>
    </div>
</div>